<template>
  <div class="admin_page">
    <admin-header></admin-header>
    <admin-side-bar></admin-side-bar>
    <admin-container>
      <h3 class="mb15 flex">
        <span class="mr10">{{ info.name }} 的库存管理</span>
        <el-button
          type="text"
          size="mini"
          @click="
            $refs.add.show({
              goods_id: form.goods_id
            })
          "
        >
          添加库存
        </el-button>
        <el-button type="text" size="mini" @click="() => $router.back()">
          返回
        </el-button>
      </h3>
      <el-table
        v-loading="appLoading"
        border
        size="mini"
        :data="data.data"
        row-key="id"
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="缩略图">
          <template slot-scope="{ row }">
            <el-image style="height: 50px" :src="row.thumb"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="颜色" prop="color"></el-table-column>
        <el-table-column label="尺寸" prop="size"></el-table-column>
        <el-table-column label="型号" prop="type"></el-table-column>
        <el-table-column label="数量" prop="total"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200px">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="$refs.add.show(row)">
              修改
            </el-button>
            <el-button type="text" size="mini" @click="del(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 bg_fff">
        <el-pagination
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </admin-container>
    <goods-sku-add-dialog
      ref="add"
      @ok="id => $refs.cache.show(id)"
    ></goods-sku-add-dialog>
    <goods-sku-cache-update-dialog
      ref="cache"
      @ok="refresh"
    ></goods-sku-cache-update-dialog>
  </div>
</template>

<script>
import AdminHeader from "../../../components/admin/header";
import AdminSideBar from "../../../components/admin/side-bar";
import AdminContainer from "../../../components/admin/container";
import { AppLoadingMixin } from "../../../lib/mixins/app-loading";
import { PageMixin } from "../../../lib/mixins/PageMixin";
import GoodsSkuAddDialog from "../../../components/goods/sku-add-dialog";
import GoodsSkuCacheUpdateDialog from "../../../components/goods/sku-cache-dialog";

export default {
  name: "NewsList",
  components: {
    GoodsSkuCacheUpdateDialog,
    GoodsSkuAddDialog,
    AdminContainer,
    AdminSideBar,
    AdminHeader
  },
  mixins: [AppLoadingMixin, PageMixin],
  data() {
    return {
      info: {},
      form: { goods_id: "" }
    };
  },
  computed: {},
  mounted() {
    this.form.goods_id = this.$route.query.goods_id;
    this.getData();
  },
  methods: {
    del(data) {
      this.$confirm(`是否删除${data.name}?`).then(async () => {
        if (await this.$goodsService.skuDel(data.id)) {
          this.calculatePage("-");
          this.getData();
        }
      });
    },
    async getData() {
      const { page, form } = this;
      this.data.data.splice(0);
      this.info = await this.$goodsService.detail(this.form.goods_id);
      this.data = await this.$goodsService.skuList({ ...page, ...form });
    }
  }
};
</script>

<style scoped></style>
